@import 'utils';
.SettingEmail {
  .need-certify {
    background: $oc-orange-1;
    color: $oc-orange-7;
    font-weight: 600;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    button {
      font-size: 0.875rem;
      border-radius: 4px;
      margin-left: 0.5rem;
      border: 1px solid $oc-orange-6;
      background: white;
      padding: 0.5rem;
      cursor: pointer;
      &:hover {
        color: white;
        background: $oc-orange-6;
      }
    }
    @include media('<medium') {
      font-size: 0.875rem;
      button {
        font-size: 0.75rem;
      }
    }
  }
  .current-email {
    display: flex;
    .email {
      display: flex;
      align-items: center;
      svg {
        color: $oc-red-6;
        font-size: 1.5rem;
        margin-right: 0.5rem;
      }
      font-size: 1.125rem;
      color: $oc-gray-9;
      .email-action {
        font-size: 0.875rem;
        font-weight: 600;
        color: $oc-gray-6;
        margin-left: 4px;
        text-decoration: underline;
        cursor: pointer;
        &:hover {
          color: $oc-gray-9;
        }
      }
      &.empty {
        width: 100%;
        padding: 0.75rem;
        background: $oc-red-1;
        color: $oc-red-6;
        font-weight: 600;
        .email-action {
          border-radius: 4px;
          border: 1px solid $oc-red-8;
          padding: 0.5rem;
          background: white;
          margin-left: auto;
          color: $oc-red-8;
          text-decoration: none;
          &:hover {
            color: white;
            background: $oc-red-8;
          }
        }
      }
    }
  }
  .edit-email {
    .email-form {
      display: flex;
      width: 75%;
      @include media('<medium') {
        width: 100%;
      }
      input {
        flex: 1;
        border-radius: 4px;
        border: 1px solid $oc-gray-4;
        outline: none;
        font-size: 1rem;
        padding: 0.5rem;
      }
      button {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-radius: 4px;
        margin-left: 0.5rem;
        border: 1px solid $oc-gray-5;
        font-weight: 600;
        font-size: 0.875rem;
        &:hover {
          background: $oc-gray-5;
          color: white;
        }
        &.confirm {
          border-color: $oc-violet-5;
          color: $oc-violet-5;
          &:hover {
            color: white;
            background: $oc-violet-5;
          }
        }
      }
    }
    .caution {
      margin-top: 1rem;
      font-size: 0.875rem;
      display: inline-flex;
      color: $oc-red-6;
      font-weight: 600;
    }
  }

  section {
    h5 {
      font-size: 1.125rem;
      margin-bottom: 1rem;
    }
    button {
      border-radius: 4px;
      border: 1px solid $oc-gray-7;
      margin-top: 1rem;
      font-weight: 600;
      font-size: 0.875rem;
      padding: 0.5rem;
      cursor: pointer;
      &:hover {
        color: white;
        background: $oc-gray-7;
      }
    }
  }
}
